<style>
  .el-icon-copy-document {

    font-weight: bold;
  }

  .el-icon-plus {
    font-weight: bold;
  }

  .el-icon-edit {
    font-weight: bold;
  }

  .el-icon-delete {
    font-weight: bold;
  }

</style>
<template>


  <div class="app-container">
    <el-button style="margin-bottom: 20px" @click="categoryAdd()" icon="el-icon-circle-plus-outline" size="small ">添加游戏分类</el-button>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="id"
        label="序号"
        sortable
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="游戏分类"
      >
      </el-table-column>

      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-tooltip  class="item" effect="dark" content="编辑" placement="bottom-start">
            <el-link type="primary" icon="el-icon-edit" @click="categoryEdit(scope.row.id,scope.row.name)"></el-link>
          </el-tooltip>
          <el-popconfirm
            @confirm="categoryDelete(scope.row.id)"
            title="确定删除吗？"
          >
            <el-tooltip slot="reference"  style="margin-left: 20px" class="item" effect="dark" content="删除" placement="bottom-start">
              <el-link   type="primary" icon="el-icon-delete"></el-link>
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="添加游戏分类"
      :visible.sync="dialogFormVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form :model="form">
        <el-form-item label="上级分类名称" :label-width="formLabelWidth">
          <div class="block">
            <el-cascader
              v-model="form.groupName"
              :options="selectData"
              clearable
              :props="{ expandTrigger: 'hover',label:'name',value:'id',}"
              @change="handleChange"></el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="编辑游戏分类"
      :visible.sync="dialogFormVisible1"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form :model="form">
        <el-form-item label="上级分类名称" :label-width="formLabelWidth">
          <div class="block">
            <el-cascader
              v-model="form.groupName"
              :options="selectData"
              clearable
              :props="{ expandTrigger: 'hover',label:'name',value:'id',}"
              @change="handleChange"></el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="edit()">确 定</el-button>
      </div>
    </el-dialog>

    <!--    <pagination v-show="total>0" :total="total" :page.sync="listQuery.current_page" :limit.sync="listQuery.per_page" @pagination="getList" />-->
  </div>
</template>

<script>
  // import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import {
    getGameGameCategories,
    storeGameGameCategory,
    updateGameGameCategory,
    destroyGameGameCategory

  } from '@/api/game/gameCategories'

  export default {
    name: 'ComplexTable',
    // components: { Pagination },
    data() {
      return {
        value: '',
        total: 0,
        formLabelWidth: '120px',
        dialogFormVisible: false,
        dialogFormVisible1: false,
        form: {
          id:'',
          groupName: '',
          name: '',
        },
        listQuery: {
          current_page: 1,
          per_page: 20,
          sort: '+id',
          dataType:'',
        },
        tableData: [],
        selectData: [],
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listQuery.dataType = ''
        getGameGameCategories(this.listQuery).then(response => {
          this.tableData = response.data

          // Just to simulate the time of the request
        })
      },
      categoryAdd() {
        this.dialogFormVisible = true
        this.listQuery.dataType=1
        getGameGameCategories(this.listQuery).then(response => {
          this.selectData = response.data
          // Just to simulate the time of the request
        })
        // eslint-disable-next-line no-sequences
        // console.log( this.selectData);
      },
      categoryEdit(index,name) {
        this.form.name = name
        this.form.id = index
        this.dialogFormVisible1 = true
        this.listQuery.dataType=1
        getGameGameCategories(this.listQuery).then(response => {
          this.selectData = response.data
          // Just to simulate the time of the request
        })

      },

      categoryDelete(index) {
        destroyGameGameCategory(index).then((response)=>{
          if(response.status ==200){
            this.$message.success(response.data)
            this.getList()
          }else{
            this.$message.error(response.data)
          }

        }).catch((error)=>{
          this.$message.error('请求失败')

        })

      },
      handleChange() {

      },
      edit(){
        updateGameGameCategory(this.form.id,{parent_id:this.form.groupName.[0]}).then((response)=>{
          if(response.status==200){
            this.dialogFormVisible1=false
            this.getList();
            this.form.groupName=''
            this.form.name=''
            this.$message.success(response.data)

          }else{
          this.$message.error(response.data)
        }

      }).catch((error)=>{
        this.$message.error('请求失败')
      })

      },
      submit(){
        if(this.form.groupName=='' || this.form.name==''){
          this.$message.error('不能为空')
        }
        storeGameGameCategory(
          {
            parent_id:this.form.groupName.[0],
            name:this.form.name,
          }).then((response)=>{
               if(response.status==200){
                 this.dialogFormVisible=false
                 this.getList();
                 this.form.groupName=''
                 this.form.name=''
                 this.$message.success(response.data)
               }else {
                 this.$message.error(response.data)
               }

        }).catch((error)=>{
            this.$message.error('请求失败')
       })

      }


    }
  }
</script>
